<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<%@ include file="/mete.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>
<script type='text/javascript' src='${pageContext.request.contextPath }/js/validator/validator.js' ></script>

<script type="text/javascript">
$(function(){
	
	$("#frmApp").validator({
		rules: {},
		fields: {
		    "#name": "required",
		    "#province": "required",
		    "#city": "required",
		    "#county": "required",
		    "#location": "required",
		    "#mobile":"mobile",
		},
		valid: function (form) {
			$.post(form.submit(),null,function(resq){
				var json = eval('('+resq+')');
				if(json.status == 0)
					alert(json.data);
			})
		},
		dataType:"json"
		});
	
	//页面加载完成后三级联动回显
	$.post("${pageContext.request.contextPath }/gasstation!getProvinces.do",null,function(resp){
		var json = eval('(' + resp + ')'); 
		$("#province").html(json.data);
			$("#province").val("${model.PROVINCE }");
		//	alert($("#province").val());
		if($("#province").val() != null && $("#province").val() != ""){
			$.post("${pageContext.request.contextPath }/gasstation!getCities.do",{"province":$("#province").val()},function(resp){
				var json = eval('(' + resp + ')'); 
				$("#city").html(json.data);
					$("#city").val("${model.CITY }");
		//			alert($("#city").val());
				if($("#city").val() != null && $("#city").val() != ""){
					$.post("${pageContext.request.contextPath }/gasstation!getCounties.do",{"city":$("#city").val(),"province":$("#province").val()},function(resp){
						var json = eval('(' + resp + ')'); 
						$("#county").html(json.data);
							$("#county").val("${model.COUNTY }");
					});
				}
			});
		}
	});
	
	//三级联动
	$("#province").change(function(){
		if(!$("#province").val()){		//如果省份下拉列表的值为空,则设置区县和城市的下拉列表不可用,值为空
			$("#city option:first").prop("selected", 'selected');
			$("#city").attr("disabled","disabled");
			$("#county option:first").prop("selected", 'selected');
			$("#county").attr("disabled","disabled");
			return;
		}
		$("#city").attr("disabled",false);
		$.post("${pageContext.request.contextPath }/gasstation!getCities.do",{"province":$("#province").val()},function(resp){
			var json = eval('(' + resp + ')'); 
			$("#city").html(json.data);
		});
		$("#county").html("");
	});
	$("#city").change(function(){
		console.log($("#city").val());
		if(!$("#city").val()){		//如果城市下拉列表的值为空,则设置区县的下拉列表不可用,值为空
			$("#county option:first").prop("selected", 'selected');
			$("#county").attr("disabled","disabled");
			return;
		}
		$("#county").attr("disabled",false);
		$.post("${pageContext.request.contextPath }/gasstation!getCounties.do",{"city":$("#city").val(),"province":$("#province").val()},function(resp){
			var json = eval('(' + resp + ')'); 
			$("#county").html(json.data);
		});
	});
})
	
</script>
</head>
<body>
	<div class="meijieContent">
		<div class="myform app_info">
		<form action="${pageContext.request.contextPath }/gasstation!update.do" class="form-horizontal n-validator n-yellow" id="frmApp" method="post" role="form">
			<h2>新增网点</h2>
			<ul>
			<input type="hidden" name="ID" value="${model.ID }">
            <table>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>名称:</td>
                    <td class="content"><input class="txt" id="Name" name="NAME" value="${model.NAME}" placeholder="请输入客户名称" type="text"/></td>
               </tr>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>省份:</td>
                    <td class="content">
                    	<select id="province" name="PROVINCE" value="${model.PROVINCE }">
						</select>
					</td>
               </tr>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>城市:</td>
                    <td class="content">
                   		<select id="city" name="CITY" value="${model.CITY }">
						</select>
					</td>
               </tr>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>区县:</td>
                    <td class="content">
                   		<select id="county" name="COUNTY" value="${model.COUNTY }">
						</select>
					</td>
               </tr>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>位置:</td>
                    <td class="content" style="padding: 5px"><input class="txt" id="Location" name="LOCATION" value="${model.LOCATION }" placeholder="请输入地址" type="text"/></td>
               </tr>
               <tr class="trbg">
                    <td class="colname"><span class="warn">*</span>联系电话:</td>
                    <td class="content"><input class="txt" id="Mobile" name="MOBILE" value="${model.MOBILE }" placeholder="请输入联系电话" type="text"/></td>
               </tr>
               <tr class="trbg">
                    <td class="submit" colspan="2" align="center">
                    	<input class="submit" type="submit" value="保  存"/>
					</td>
               </tr>
            </table>
		</ul>
	</form>
	</div>
	</div>
</body>

</html>
